<template>
   <div class="box1">
        <div class="left">
          <div class="tuijian">
            <ul>    
              <li v-for="item in paihang" 
              :key="item.program.commentThreadId"> 
              <img :src="item.program.coverUrl" alt=""> 
              <div>  <a href="#">
                <span>{{item.program.description}}</span>
                </a>
               <a href="#">
                 <em>{{item.program.dj.nickname}}</em>   
                 </a>
              </div> 
             
                <a href="#" class="buttonright">
              <button>{{item.program.radio.category}}</button>
            </a>
             
              </li>
              <!-- <li v-for="(item,index) in paihang" :key="index">{{item.program.description}}</li> -->
              
            </ul>
          </div>
    </div>
</div>
</template>

<script>
import axios from 'axios';
export default {
  name:"houerPaihang",
  data() {
    return {
      paihang: [],
    };
  },
  methods:{
      getvideoPaihang(){
        var that=this;
        axios.get("http://localhost:3000/dj/program/toplist/hours?limit=10")
      .then(function(res){
        // that.carouselPic=res.data.djRadios;
        console.log("tttttttttttttttttttttttt");
        //  console.log(res);
         that.paihang=res.data.data.list;
               //data.data.list[0].program.description
      },function(erro){
        console.log(erro);
      });
      },
  },
  mounted() {
    this.getvideoPaihang();
  },
  
 

}
// 电台 - 24小时节目榜

// 说明 : 调用此接口,可获取24小时节目榜

// 可选参数 :

// limit : 返回数量 , 默认为 100 (不支持 offset)

// 接口地址 : /dj/program/toplist/hours

// 调用例子 : /dj/program/toplist/hours?limit=1
</script>

<style scoped>

a:hover{
  text-decoration: underline black;
  color: black;
}
 .box1 .left{
  float:left;
  width:470px;
height: 650px;
  /* background-color: #d3dce6; */
}

 .tuijian{
   width: 100%;
   height: 600px;
   border: 1px solid #d3dce6;
   border-top:2px solid rgb(194, 12, 12);
 }

 .tuijian ul{
   width: 100%;

 }
 .tuijian ul li{
   height: 60px;
  
 }
 
 .tuijian ul li:nth-child(even){ 
   background-color: rgb(206, 255, 192);
   }
     .tuijian ul li img{
     width: 40px;
     height: 40px;
      vertical-align: text;
      margin-left: 23px;
      margin-top: 10px;
      
   }
   .tuijian ul li div{
     width: 280px;
     display: inline-block;
     height: 40px;
     margin-left: 15px;
     margin-top: 10px;
     /* vertical-align: middle; */
   }
   .tuijian ul li div a span{
      display: block;
     width: 280px;
     height: 21px;
    overflow: hidden;
    white-space: nowrap;
     text-overflow:ellipsis;
     color: rgb(51, 51, 51);
   }
   .tuijian ul li div  a:hover span{
color: black;
   }
   .tuijian ul li div a em{
     font-style:normal;
     color:rgb(153, 153, 153);
     font-size: 14px;
   }
 
   
     .buttonright{
      display:inline-block;
      width: 90px;
     height: 40px;
     margin-left:10px;
     line-height: 60px;
     position:relative;
     top: -14px;
     
    }
     .buttonright button{
      width: 90px;
     height: 40px;


    }
</style>
